import React, {useEffect} from "react";
import style from "./css/Cinema.module.css";
import CinemaAction from "../action/CinemaAction";
import {connect} from "react-redux";

function Cinema(props) {
    const {cinemaList, CinemaAction} = props

    useEffect(() => {
        if (cinemaList.length === 0) {
            console.log("111");
            CinemaAction()
        } else {
            console.log("使用了缓存");
        }
    }, [cinemaList, CinemaAction]);

    return <div>
        <div style={{display: "flex", justifyContent: "space-between", paddingLeft: "5px", paddingRight: "5px"}}>
            <div onClick={() => props.history.push("/city")}>
                {props.city}
            </div>
            <div onClick={() => props.history.push("/cinema/search")}>搜索</div>
        </div>
        <div className={style['cinema-list']}>
            {props.cinemaList.map(cinema => {
                return <dl key={cinema.cinemaId}>
                    <dt>{cinema.name}</dt>
                    <dd>{cinema.address}</dd>
                </dl>
            })}
        </div>
    </div>
}

const mapStateToProps = state => {
    return {
        cinemaList: state.CinemaReducer.cinemaList,
        city: state.CityReducer.city
    }
}
const mapDispatchToProps = {
    CinemaAction
}
export default connect(mapStateToProps, mapDispatchToProps)(Cinema)